<template>
	<div class="layout-pd">
		<section >
			<el-card shadow="hover">
				<el-form :model="state.param"  >
					<el-row :gutter="35">
						<el-col :xs="22" :sm="22" :md="22" :lg="22" :xl="22">
							<el-row :gutter="35">
								<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
									<el-form-item label="选择门店">

										<el-select v-model="state.param.store" placeholder="请选择门店" class="w100">
											<el-option v-for="item in state.query.storeList" :key="item.id"
												:label="item.name" :value="item.id" />
										</el-select>
									</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="12" :md="8" :lg="5" :xl="5" >
									<el-form-item label="考勤组名">
										<el-input v-model="state.param.groupName" placeholder="请输入考勤组名" clearable></el-input>
									</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="12" :md="8" :lg="5" :xl="5" >
									<el-form-item label="员工姓名">
										<el-input v-model="state.param.name" placeholder="请输入员工姓名" clearable></el-input>
									</el-form-item>
								</el-col>

								<el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8" >
									<el-form-item label="选择日期">
										<el-date-picker v-model="state.param.dateTime" type="daterange" unlink-panels :shortcuts="shortcuts"
											format="YYYY/MM/DD" value-format="YYYY-MM-DD" range-separator="-" :disabled-date="disabledDate"
											start-placeholder="开始日期" end-placeholder="结束日期" />&nbsp;默认当月
									</el-form-item>
								</el-col>
								
							</el-row>
						</el-col>
						<el-col :xs="2" :sm="2" :md="2" :lg="2" :xl="2" class="screenMenu">
							<el-button type="primary" @click="search">
								<SvgIcon name="iconfont icon-biaodan" /> 搜 索
							</el-button>
						</el-col>
					</el-row>
				</el-form>
			</el-card>
			
			<el-card shadow="hover" class="mt15" v-loading="state.loading">
				<section >
					<el-table :data="state.tableData" style="width: 100%" border>
						<el-table-column label="员工姓名" prop="job" />
						<el-table-column label="考勤组名称" prop="money" />
						<el-table-column label="所属门店" prop="orderPrice" />
						<el-table-column label="出勤天数" prop="orderPrice" />
						<el-table-column label="迟到次数" prop="orderPrice" />
						<el-table-column label="旷工天数" prop="orderPrice" />
						<el-table-column label="早退次数" prop="orderPrice" />
						<el-table-column label="上班缺卡次数" prop="orderPrice" />
						<el-table-column label="下班缺卡次数" prop="orderPrice" /> 

						<el-table-column label="操作" width="180" align="center">
							<template #default="scope">
								<el-link :underline="false" type="primary" @click="previewInfo(scope.row)">详情</el-link>
							</template>
						</el-table-column>
					</el-table>
				</section>

				<section class="mt15">
					<el-row justify="end">
						<el-col :span="24" class="flex-end-center">
							<el-pagination
							v-model:current-page="state.param.pageNum"
							v-model:page-size="state.param.pageSize"
							:page-sizes="[10, 20, 30]"  
							:background="true"
							layout="total, sizes, prev, pager, next, jumper"
							:total="state.param.total"
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							/>
						</el-col>
					</el-row> 
				</section>
			</el-card>
		</section>
		<CardDialog v-model="previewVisble" />
	</div>
</template>

<script setup lang="ts" name="funCountup">
import {  onMounted, reactive, ref } from 'vue'; 
import type { storeNodeListData } from "/@/types/order";

import CardDialog from '/@/views/personnel/attendanceStatistics/components/CardDialog.vue' 
 

const state = reactive({
	dialogTitle: '',
	param: {
		groupName: '',
		name: '',
		store: '',
		dateTime: '',
		total: 0, 
		pageNum: 1,
		pageSize: 10,
		rowId: 0, 
	},
	query: { 
		storeList: [] as Array<storeNodeListData>,
	},
	loading: false,
	total: 0,
	tableData: [
		{
			id: 1,
			name: 'Tom',
			property: '属性名称',
			spec: '规格',
			salesVolume: '销量',
			cellPrice: '销售价格', 
			orderPrice: '销售金额',
			buyCount: '购买人数',
			coverRatio: '客户覆盖率',
			performanceRatio: '业绩占比',
			allRatio: '全款率',
			startTime: '2023-12-22 12:36:54',
			endTime: '2023-12-22 12:36:54', 
			status: '活动状态',
		}
	] as Array<any>,
});

const previewVisble = ref(false)

const search = () => {}

const handleSizeChange = () => {}
const handleCurrentChange = () => {}

const shortcuts = [
	{
		text: '本月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.setDate(1))
		return [start, end]
		},
	},
	{
		text: '近一个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
		return [start, end]
		},
	},
	{
		text: '近三个月',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
		return [start, end]
		},
	},
	{
		text: '近半年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
		return [start, end]
		},
	},
	{
		text: '近一年',
		value: () => {
		const end = new Date()
		const start = new Date()
		start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
		return [start, end]
		},
	},
]

const disabledDate= (time: Date) => time.getTime() > Date .now();


const previewInfo = (row: any) => {
	previewVisble.value = true 
}


// 页面加载时
onMounted(() => {
});
</script>

<style scoped lang="scss">
</style>
